/**
 * OpenLayer通用方法
 */

import { transform, fromLonLat } from 'ol/proj'
import { Overlay } from 'ol'
import { Vector as VectorLayer } from 'ol/layer'
import { GeoJSON } from 'ol/format'
import { Vector as VectorSource } from 'ol/source'

const oMapUtil = {
  From3857To4326 (coord) {
    return transform(coord, 'EPSG:3857', 'EPSG:4326')
  },

  From4326To3857 (coord) {
    return transform(coord, 'EPSG:4326', 'EPSG:3857')
  },

  /**
     * 按像素平移地图
     * @param {*} x
     * @param {*} y
     */
  PanByPixel (x, y, zoom) {
    const mapCenter = olMap.getView().getCenter()// 获取当前地图中心点（投影坐标）
    const centerPix = olMap.getPixelFromCoordinate(mapCenter)// 投影坐标转为像素坐标
    const newX = centerPix[0] - x// 平移横坐标
    const newY = centerPix[1] - y// 平移纵坐标
    olMap.getView().animate({
      center: olMap.getCoordinateFromPixel([newX, newY]), // 平移后的像素坐标转投影坐标
      duration: 400,
      zoom: zoom || olMap.getView().getZoom()
    })// 如果不需要动画效果，也可以直接用setCenter和setZoom方法移动地图
  },

  /**
     * 地图飞行
     * @param {*} center
     * @param {*} duration
     * @param {*} zoom
     */
  MapAnimateTo (center, duration = 400, zoom) {
    olMap.getView().animate({
      center: center,
      duration: duration,
      zoom: zoom || olMap.getView().getZoom()
    })
  },

  /**
   * 添加一个圆形 Marker
   * @param lngLat
   * @param el
   */
  addOneMarker (lngLat, el = null) {
    const tempEl = document.createElement('div')
    tempEl.className = 'simple-circle-marker'
    const marker = new Overlay({
      position: fromLonLat(lngLat),
      positioning: 'center-center',
      element: el || tempEl,
      stopEvent: false
    })
    olMap.addOverlay(marker)
  },

  /**
   *
   * @param source
   * @param style
   */
  addVectorLayer (source, style) {
    const vectorLayer = new VectorLayer({
      source: source,
      style: style
    })
  },

  /**
   * 快速添加GeoJson图层
   * @param {*} layerId
   * @param {*} geoJson
   * @param {*} style
   */
  addGeojsonLayer (layerId, geoJson, style) {
    // layerId 唯一性
    olMap.getLayers().forEach(layer => {
      // eslint-disable-next-line no-prototype-builtins
      if (layer && layer.values_ && layer.values_.hasOwnProperty('id') && (layerId === layer.get('id'))) {
        throw new Error(`addGeojsonLayer: 图层id：${layerId}重复`)
      }
    })
    // 添加图层
    const vLayer = new VectorLayer({
      id: layerId,
      source: new VectorSource({
        features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(geoJson)
      }),
      style: style
    })
    olMap.addLayer(vLayer)
  },

  /**
   * 移除指定id的图层
   * @param {*} Ids
   */
  removeLayerByIds (Ids) {
    const tempIds = [...Ids]
    const layers = []
    olMap.getLayers().forEach(layer => {
      // eslint-disable-next-line no-prototype-builtins
      if (layer && layer.values_ && layer.values_.hasOwnProperty('id')) {
        const layerId = layer.get('id')
        if (layerId && tempIds.indexOf(layerId) !== -1) {
          // olMap.removeLayer(layer)
          layers.push(layer)
        }
      }
    })

    layers.forEach(l => {
      olMap.removeLayer(l)
    })
  }

}

export default oMapUtil
